<template>
  <div class="invoiceFormBox">
    <span class="form_title">填写发票详情</span>
    <el-form ref="form" :model="invoiceForm" label-width="120px" class="formbox" :rules="invoiceRules">
      <el-form-item label="抬头类型" prop="titleType">
        <el-select v-model="invoiceForm.titleType" placeholder="请选择" style="width: 100%">
          <el-option label="个人/非企业单位" value="personal"></el-option>
          <el-option label="公司" value="company"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票抬头" prop="title">
        <el-input v-model="invoiceForm.title"></el-input>
      </el-form-item>
      <el-form-item label="纳税人识别号" prop="identificationNumber" v-if="invoiceForm.titleType === 'company'">
        <el-input v-model="invoiceForm.identificationNumber"></el-input>
      </el-form-item>
       <el-form-item label="发票类型" >
        <el-input v-model="invoiceForm.type" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="发票内容" prop="content">
        <el-input v-model="invoiceForm.content"></el-input>
      </el-form-item>
      <el-form-item label="发票金额" >
        <el-input v-model="invoiceForm.payMoney" class="payMoney" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="收件人" prop="receiver">
        <el-input v-model="invoiceForm.receiver"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="invoiceForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="所在地区" prop="addr">
        <el-cascader expand-trigger v-model="invoiceForm.addr" :options="address" @active-item-change="handleItemChange" :props="props" style="width: 100%"></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="invoiceForm.address"></el-input>
      </el-form-item>
      <el-form-item label="电子邮件" prop="email" >
        <el-input v-model="invoiceForm.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')" style="width: 45%">提交</el-button>
        <el-button @click="cancelInvoice" style="width: 45%" plain>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {PHONE, TEL} from '@/config/regex'
  import {addressForAll} from '@/tool/address'
  import {Form, FormItem, Input, Button, Select, Option, Cascader, Radio} from 'element-ui'
  import {postInvoiceForm} from '@/service/get-data'
  import {mapActions, mapState} from 'vuex'
  export default {
    name: 'invoice',
    components: {
      elForm: Form,
      elFormItem: FormItem,
      elInput: Input,
      elButton: Button,
      elSelect: Select,
      elOption: Option,
      elCascader: Cascader,
      elRadio: Radio
    },
    props: {
      orderIds: {
        type: String
      }
    },
    data () {
      let checkTel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('电话号码不能为空'))
        } else {
          if (PHONE.test(value) || TEL.test(value)) {
            callback()
          } else {
            return callback(new Error('号码格式输入错误'))
          }
        }
      }
      return {
        invoiceForm: {
          payeeType: '', // 抬头类型
          title: '', // 发票抬头
          identificationNumber: '', // 纳税人识别号
          type: '增值税发票', // 发票类型
          content: '', // 发票内容,
          payMoney: '7900.00', // 发票金额
          receiver: '', // 收件人
          phone: '', // 联系电话
          addr: [], // 所在地区
          address: '', // 详细地址
          email: '' // 电子邮件
        },
        invoiceRules: { // 开具发票的规则
          titleType: [
            { required: true, message: '请选择抬头类型', trigger: 'change' }
          ],
          title: [
            {required: true, message: '请输入发票抬头', trigger: 'change'}
          ],
          identificationNumber: [
            {required: true, message: '请输入纳税人识别号', trigger: 'change'}
          ],
          content: [
            {required: true, message: '请填写发票内容', trigger: 'change'}
          ],
          receiver: [
            {required: true, message: '请填写收件人', trigger: 'change'}
          ],
          phone: [
            {validator: checkTel, required: true, message: '请输入正确的电话号码', trigger: 'change'}
          ],
          addr: [
            {required: true, type: 'array', message: '请选择所在地区', trigger: 'change'}
          ],
          address: [
            {required: true, message: '请输入详细地址', trigger: 'change'}
          ],
          email: [
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }
          ]
        },
        address: addressForAll, // 开发票表单中的地址数据
        props: {
          value: 'value',
          label: 'label',
          children: 'children'
        },
        invoRadio: '1' // 发票类型选中
      }
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          let result = false
          if (valid) {
            alert('submit!')
            result = true
          } else {
            this.$message({
              message: '信息填写错误啦'
            })
            result = false
            return false
          }
          this.$emit('invoice-ok', result)
        })
      },
      // 取消按钮
      cancelInvoice () {
        this.$emit('invoice-cancel', false)
      },
      handleItemChange (val) { // 级联选择
        console.log(typeof val)
        console.log(val)
      },
      // 发票申请接口
      async postInvoiceForm () {
        let res = await postInvoiceForm(
          this.orderIds,
          this.invoiceForm.titleType,
          this.invoiceForm.title,
          this.invoiceForm.identificationNumber,
          this.invoiceForm.content,
          this.invoiceForm.receiver,
          this.invoiceForm.phone,
          this.invoiceForm.address,
          this.invoiceForm.email,
          this.invoiceForm.type
          ) // 这边还没有填好
        if (res.data.resultCode && res.data.resultCode === 2000) {
          alert('暂时提交了吧')
        }
      },
      // 默认地址
      ...mapActions(['fetchAllAddrList'])
    },
    mounted () {
      this.fetchAllAddrList()
    },
    computed: {
      ...mapState({
        curAddr: state => {
          return state.address.defaultAddr
        }
      })
    },
    watch: {
      curAddr (newVal) {
        let addrObj = newVal[0]
        let _arr = [parseInt(addrObj.provinceCode), parseInt(addrObj.cityCode), parseInt(addrObj.areaCode)]
        this.invoiceForm.receiver = addrObj.name
        this.invoiceForm.phone = addrObj.mobile
        this.invoiceForm.address = addrObj.address
        this.invoiceForm.addr = _arr
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 发票表单
  .invoiceFormBox{
    position: relative;
    margin-top: 20px;
    .form_title{
      position: relative;
      font-size: 18px;
      color: #3F3F3F;
      padding-left: 10px;
      &:before{
        position: absolute;
        display:inline-block;
        content: "";
        width:6px;
        height: 20px;
        left: 0;
        background: #F9D347;
        border-radius: 8px;
      }
    }
  }
  .formbox{
    width: 400px;
    margin-top: 20px;
    margin-left: 40px;
    .payMoney{
      font-size: 14px;
      color: #F55923;
    }
  }
</style>
